<template>
    <div class='content-main'>
        <el-container>
            <el-header>
                <phead />
            </el-header>
            <el-container>
                <el-aside width=200px class="el-aside">
                    <pcontentAside />
                </el-aside>
                <el-main>
                    <pcontentRight />
                </el-main>
            </el-container>
            <el-footer>
                <pfooter />
            </el-footer>
        </el-container>
    </div>
</template>

<script>
    import Header from "@/components/view/common/Header";
    import ContentRight from "@/components/view/common/ContentRight";
    import ContentAside from "@/components/view/common/ContentAside";
    import Footer from "@/components/view/common/Footer";

    export default {
        name: 'ContentMain',
        components: {
            phead: Header,
            pcontentRight: ContentRight,
            pcontentAside: ContentAside,
            pfooter: Footer
        }
    }
</script>

<style scoped>
    .content-main {
        height: 100%;
    }

    .el-container {
        height: 100%;
    }

    #app {
        font-family: "Avenir", Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
    }

    .el-header,
    .el-footer {
        background-color: #b3c0d1;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #d3dce6;
        color: #333;
        text-align: left;
        line-height: 200px;
        width: 200px;
    }
</style>